<template>
  <div class="bottom-cotainer">
    <div class="bottom-left">
      <div class="bottom-left-top">
        Copyright  © 2020 codeliu | Powered by Vue | Yuxi You
      </div>
      <div>
        <span class="iconfont font-img i">&#xe6e8;</span>
        站点总字数: 6.5k 字 |
        <span class="iconfont font-img">&#xe608;</span>
        总访问量:{{Interview}}  次 |
        <span class="iconfont font-img i">&#xe606;</span>
        总访问人数: {{ userNumber }}人
      </div>
      <div>
        {{ date }}
      </div>
    </div>
    <div class="bottom-right">
      <span class="iconfont font-img" @click="jumpGithub">&#xe63a;</span>
      <span class="iconfont font-img" @click="showqq">&#xe6e4;</span>
      <span class="iconfont font-img" @click="showweixin">&#xe665;</span>

    </div>
    <el-dialog
        title="作者QQ"
        :visible.sync="dialogVisibleQQ"
        class="dialogVisible"
    >
      <img class="img" src="../assets/images/qq.jpg" alt="">
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisibleQQ = false">确 定</el-button>
    </span>
    </el-dialog>
    <el-dialog
        title="作者微信"
        :visible.sync="dialogVisibleWeixin"
        class="dialogVisible"
    >
      <img class="img" src="../assets/images/weixin.jpg" alt="">
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisibleWeixin = false">确 定</el-button>
    </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return{
      dialogVisibleQQ: false,
      dialogVisibleWeixin: false,
      userNumber: window.sessionStorage.getItem('userNumber'),
      Interview: window.sessionStorage.getItem('Interview'),
      date: '',
      timer: '',
      showWeixin: false,
      showQQ:false
    }
  },
  async created() {
    const beforeDate = new Date('2020/10/02 12:00:00')
      this.timer =  await setInterval(() => {

      const currentDate = new Date()
      const currentTime = currentDate.getTime()
      const beforeTime = beforeDate.getTime()
      const allTime = currentTime - beforeTime
      const allSecond = parseInt(allTime/1000);
      const d = parseInt(allSecond/3600/24)
      const h = parseInt(allSecond/3600%24)
      const m = parseInt(allSecond/60%60)
      const s = parseInt(allSecond % 60)
      this.date = `本站已安全运行 ${d} 天 ${h} 小时 ${m} 分钟 ${s} 秒`
     },1000)

  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    jumpGithub () {
      window.open('https://gitee.com/fish_fairy')

    },
    showqq () {
      this.dialogVisibleQQ = true

    },
    showweixin () {
      this.dialogVisibleWeixin = true

    }
  }
}
</script>

<style lang="less" scoped>
.bottom-cotainer{
  //position: relative;
  bottom: -30px;
  width: 100%;
  height: 100px;
  background-image: linear-gradient(to right, #6853F2 0%, #2FAAB9 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  color: #ccc;
  margin-bottom: 0px;
  .bottom-left{
    margin-right: 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    .bottom-left-top{
      font-size: 16px;
    }
  }
  .bottom-right{
    margin-left: 10vw;
    position: relative;
    span{
      margin-right: 20px;
      font-size: 18px;
      cursor: pointer;

    }

  }
  .dialogVisible{
    width: 130% ;
    transform: translateX(-10%);
    text-align: center;
  }
  .img{
    width: 25vh;
    height: 25vh;

  }
}
.font-img{
  color: white;
}
@media (min-width: 992px) and (max-width: 1300px) {


}
@media (min-width: 768px) and (max-width: 991px) {


}
@media (max-width: 767px) {
  .bottom-cotainer{
    display: flex;
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    .bottom-left{
      font-size: 11px;
      margin-bottom: 15px;
      .bottom-left-top{
        font-size: 12px;

      }
      .i{
        font-size: 12px;
      }
    }
    .bottom-right{
      span{
        margin-right: 40px;

      }
    }
  }
}
</style>
